<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
	<script src="js/modernizr.js"></script> <!-- Modernizr -->
	<title>导航菜单全屏滑出特效| jQuery手风琴特效|手机微信网站特效| 网页特效库</title>
	<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
	<meta name="description" content="网页特效库-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。" />
	<style>body{font-family: "microsoft yahei";}</style>
</head>
<body>
	<main>
		<h1>导航菜单全屏滑出特效</h1>
	</main>

	<a href="#cd-nav" class="cd-nav-trigger">Menu 
		<span class="cd-nav-icon"></span>

		<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
			<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
		</svg>
	</a>
	
	<div id="cd-nav" class="cd-nav">
		<div class="cd-navigation-wrapper">
			<div class="cd-half-block">
				<h2>导航</h2>

				<nav>
					<ul class="cd-primary-nav">
						<li><a href="#0" class="selected">首页</a></li>
						<li><a href="#0">关于我们</a></li>
						<li><a href="#0">新闻动态</a></li>
						<li><a href="#0">业务范围</a></li>
						<li><a href="#0">联系我们</a></li>
					</ul>
				</nav>
			</div><!-- .cd-half-block -->
			
			<div class="cd-half-block">
				<address>
					<ul class="cd-contact-info">
						<li><a href="mailto:info@myemail.co">xx@xx.com</a></li>
						<li>028-12345678</li>
						<li>
							<span>四川省成都市</span>
							<span>青羊区</span>
							<span>红星路一段</span>
						</li>
					</ul>
				</address>
			</div> <!-- .cd-half-block -->
		</div> <!-- .cd-navigation-wrapper -->
	</div> <!-- .cd-nav -->
	<div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">
		更多网页特效，请访问<a href="http://www.5iweb.com.cn"><b>网页特效库</b></a>,欢迎加入网页特效库QQ交流群：258242983
	</div>
	<div style="width: 220px; height: 150px; position: fixed; z-index: 1000; left: 0px;bottom:0px; background: #fff;">
		<script type="text/javascript">
		    var cpro_id = "u2586467";
		</script>
		<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
	</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>